<template>
	<view class="xbd-project-card">
		<view class="left">
			<view style="white-space: pre-line !important;word-break: break-all !important;word-wrap: break-word ;">{{myinfo.name}}</view>
			<view style=" margin-top: 20rpx; font-size: 26rpx; color:#A0A7B8; white-space: pre-line !important;word-break: break-all !important;word-wrap: break-word ;">{{myinfo.desc}}</view>
		</view>
		<view class="middle">
			<view class="">
				<image v-if="myinfo.flow[myinfo.flow.length-1].state=='successed' || myinfo.flow[myinfo.flow.length-1].state=='refused'" class="garden"
					src="@/static/image/garden3.png"></image>
				<image v-else-if="myinfo.flow[myinfo.flow.length-1].state=='wait'" class="garden"
					src="@/static/image/garden4.png"></image>
				<image
					v-else-if=" myinfo.flow[myinfo.flow.length-1].state==''"
					class="garden" src="@/static/image/garden2.png"></image>
			</view>
			<view v-if="length !== (inx+1)" class="line"></view>
		</view>
		<view class="right">
			<view style="margin-bottom: 20rpx;" v-for="(item,index) in myinfo.flow" :key="index">
				<view class="name">
					{{ names }}
					<view class="state" v-if="item.state==='successed'">
						合格
					</view>
					<view class="state color" v-if="item.state==='refused'">
						不合格
					</view>
				</view>
				<view v-if="myinfo.flow[0].state ==='' && !myinfo.observe">
					<view class="fxButtn" @click="fxButtn">
						 <image src="@/static/image/fxyj.png"></image> 风险预警
					</view>
				</view>
				<view v-if="item.state !==''">
					<view class="time">
						{{item.report_time | timeFormat('YYYY-MM-DD HH:mm')}}
					</view>
					<!-- 招投标 -->

					<view v-if="type==='bid' && inx == 0 ">
						<view class="tag">
							项目数据填报
						</view>
						<view class="text">
							预估金额（元）：<view class="text-bt">{{item.cost | priceFormat(0,'',true)}}</view>
						</view>
					</view>

					<!-- 物资采购 -->
					<view v-if="type==='goods' && inx == 0 ">
						<view class="tag">
							月度物资需求计划
						</view>
						<view class="text">
							物资名称：
							<view class="text-bt">
								{{item.month.name}}
							</view>
						</view>
						<view class="text">
							需求数量(件)：
							<view class="text-bt">
								{{item.month.count | priceFormat(0,'',true)}}
							</view>
						</view>
						<view class="text">
							预估金额(元)：
							<view class="text-bt">
								{{item.month.money | priceFormat(0,'',true)}}
							</view>
						</view>
						<view class="tag">
							紧急物资需求计划
						</view>
						<view class="text">
							物资名称：
							<view class="text-bt">
								{{item.urgent.name}}
							</view>
						</view>
						<view class="text">
							需求数量(件)：
							<view class="text-bt">
								{{item.urgent.count | priceFormat(0,'',true)}}
							</view>
						</view>
						<view class="text">
							预估金额(元)：
							<view class="text-bt">{{item.urgent.money | priceFormat(0,'',true)}}</view>
						</view>
					</view>

					<!-- 三重一大 -->
					<view v-if="!(type==='bid' && inx == 0) && !(type==='goods' && inx == 0) ">
						<view >
							<view class="tag">
								相关资料
							</view>
							<view class='attachment' v-if="showImg(item.data.data_url).length !== 0">
								<image v-for="(items,index) in showImg(item.data.data_url)" :key='index' 
									:src="showImg(item.data.data_url)[index]" @click="image_click(items)"></image>
							</view>
							<view v-else class='text'>
								文件请在PC端查看
							</view>
							<view class="tag">
								进度说明
							</view>
							<view class='text'>
								{{item.process || '-'}}
							</view>
						</view>
					</view>
					<view v-if="item.state !== 'wait'">
						<view class="tag">
							审查人
						</view>
						<view class='text'>
							{{item.audit_name}} <text
								style="margin-left: 20rpx; font-size: 26rpx;color: #8890A5;">{{item.audit_time | timeFormat('YYYY-MM-DD HH:mm')}}</text>
						</view>
						<view class="tag">
							审查意见
						</view>
						<view class='text'>
							{{item.view||'-'}}
						</view>
					</view>
				</view>
					<view v-if="item.state == 'wait'&& !myinfo.observe">
						<view class="tag">
							审查意见
						</view>
						<textarea class="textarea" placeholder="请输入内容..." v-model="value" maxlength="-1"
							auto-height></textarea>
					</view>
				
				<view  v-if=" 0<myinfo.flow.length<=2 &&  myinfo.flow.length-1 == index && !myinfo.observe ">
					<view class="floot">
						<view v-if="item.state==='wait' || (item.state!=='' && change)" class="btn back" @click="unqualified(index)">
							不合格
						</view>
						<view v-if="item.state==='wait' || (item.state!=='' && change)" class="btn pass" @click="pass(index)">
							合格
						</view>
						<view v-if="item.state!=='wait' && item.state!==''&& !change && userInfo.userid==myinfo.flow[0].audit_id" class="btn pass" @click="cancel(index)">
							修改
						</view>
					</view>
				</view>
				<view v-else-if="  myinfo.flow[myinfo.flow.length-1].state== '' &&  (myinfo.flow.length-1 ==index || myinfo.flow.length-2 ==index) && !myinfo.observe">
					<view class="floot" >
						<view v-if="item.state==='wait' || (item.state!=='' && change)" class="btn back" @click="unqualified(index)">
							不合格
						</view>
						<view v-if="item.state==='wait' || (item.state!=='' && change)" class="btn pass" @click="pass(index)">
							合格
						</view>
						<view v-if="item.state!=='wait' && item.state!=='' && userInfo.userid==myinfo.flow[0].audit_id" class="btn pass" @click="cancel(index)">
							修改
						</view>
					</view>
				</view>
				
			</view>
			<xbd-popup :isShow="showDialog" @dialogConfirm='dialogConfirm' @dialogCancel='dialogCancel'
				 :content="titleText"></xbd-popup>
		</view>
	</view>
</template>

<script>
	import {
		Prevention
	} from '@/api/index.js';
	import {
			mapState
		} from 'vuex';
	export default {
		name: 'XbdProjectCard',
		props: {
			myinfo: '',
			farId: '',
			type: '',
			names: '',
			inx: '',
			length:'',
			open:'',
		},
		watch: {
			
		},
		data() {
			return {
				change:false,
				hackReset:true,
				// 判断是否已读
				noPass:false,
				titleText: '',
				change:false,
				showDialog: false,
				flag: true,
				value: "",
				money: '',
				upImg: [],
				val: '',
				data_image: [],
				monthGoods: {
					val1: '',
					val2: '',
					val3: ''
				},
				worryGoods: {
					val1: '',
					val2: '',
					val3: ''
				},
				
			}
		},
		created() {
			console.log(this.userInfo,'userInfo')
		},
		computed: {
					...mapState(['userInfo'])
					
				},
		watch:{
		},
		methods: {
			fxButtn(){
				uni.navigateTo({
					url: `/pages/notice/notice`,
				});
			},
			// 筛选数组中的图片
			showImg(arr) {
				let a = []
				for (let i = 0; i < arr.length; i++) {
					if (arr[i].indexOf(".png") !== -1 || arr[i].indexOf(".jpg") !== -1 || arr[i].indexOf(".jpeg") !== -1) {
						a.push(arr[i])
					}
				}
				return a
			},
			dialogConfirm() {
				//弹出框确认操作
				const o = {
					id: this.farId,
					first_index: this.inx,
					second_index: this.val,
					type: this.type,
					state: 'successed',
					view:this.value,
				}
			if(this.flag){
					this.flag=false
					if(this.titleText == "确定审查结果为合格？"){
						o.state = 'successed'
					}else{
						o.state = 'refused'
					}
					console.log(this.change,this.open,'asdasdasd')
					if(this.myinfo.flow[this.val].audit_name=='' &&  this.inx == 0){
						this.showDialog = false;
						this.Report(o)
						return
					}
					console.log(this.myinfo,'myinfo')
					if(this.open == true&&this.change==false ){
						this.Update(o)
					}else{
						this.Report(o)
					}
			}
			this.showDialog = false;
				// this.cancel()
			},
			dialogCancel() {
				console.log("取消")
				this.showDialog = false;
				this.showDialog1 = false;
			},
			image_click(img) {
				// 点击预览图片
				dd.previewImage({
					current: 1,
					urls: [img],
				});
				console.log(img, 'img')
			},
			del(val) {
				console.log(val)
				this.upImg = this.upImg.filter(item => {
					return item !== val
				})
			},
			unqualified(val){
				console.log(val,'vassdas')
				this.val =val
				this.showDialog=true
				this.titleText = '确定审查结果为不合格？'
			},

			pass(val) {
				console.log(val,'vassdapass')
				this.titleText = '确定审查结果为合格？'
				this.val =val
				this.showDialog=true
				

			},
			async Report(o) {

				console.log(o, 'o')
				const res = await Prevention.getProjectAudit(o)
				if (res.success) {
					uni.$emit('upLoad')
					this.change=false
					this.flag = true
				} else {
					this.flag = true
				}
				console.log(res)
				this.$showToast(res.msg);
			},

			cancel(val) {
				// 撤销
				this.value=''
				this.val = val
				console.log(this.val,'val')
				// this.titleText = '确定审查结果为合格？'
				this.myinfo.flow[val].state = 'wait'
				
				console.log(this.myinfo.flow,'this.myinfo.flow[val].state')
				// this.showDialog=true
				this.change=true
				uni.$emit('flowUpdata',this.inx ,val)
				// 重新渲染dom节点  防止绘图出错
				        
			},
			async Update(o) {
			
				console.log(o, 'o')
				const res = await Prevention.getProjectAuditUpdate(o)
				if (res.success) {
					this.change=false
					uni.$emit('upLoad')
					this.flag = true
					this.noPass=true
				} else {
					this.flag = true
				}
				console.log(res)
				this.$showToast(res.msg);
			},

		}
	}
</script>

<style lang="scss" scoped>
	.xbd-project-card {
		display: flex;
		.fxButtn{
			margin-top: 40rpx;
			width: 200rpx;
			height: 60rpx;
			font-size: 30rpx;
			color:#FCB94F;
			line-height:56rpx;
			border-radius: 30rpx;
			border: 2rpx solid #FCB94F;
			box-sizing: border-box;
			
			image{
				margin-top: 4rpx;
				width: 30rpx;
				height: 30rpx;
				margin: 0 10rpx ;
			}
			vertical-align: sub;
		}
		.left {
			font-size: 28rpx;
			color: #000623;
			width: 120rpx;
			margin-right: 30rpx;
		}

		.middle {
			display: flex;
			flex-direction: column;

			.garden {
				height: 24rpx;
				width: 24rpx;
			}

			.line {
				flex: 1;
				margin-left: 11rpx;
				border-left: 2rpx dashed #e5e5e5;
			}
		}

		.right {
			margin-left: 30rpx;
			margin-bottom: 80rpx;
			flex: 1;

			.tag {
				font-size: 26rpx;
				color: #8890A5;
				margin-bottom: 16rpx;
			}

			.text {
				font-size: 30rpx;
				color: #000623;
				font-weight: 400;
				white-space: pre-line !important;
				word-break: break-all !important;
				word-wrap: break-word ;
				.text-bt{
					margin: 0 0 20rpx 0;
					
				}
			}
			.time{
				font-size: 28rpx;
			}
			.opinion {
				font-size: 30rpx;
				color: #000623;
				font-weight: 400;
			}

			.name {
				display: flex;
				font-size: 30rpx;
				font-weight: 700;
				margin-bottom: 10rpx;

				.state {
					padding: 3rpx 6rpx;
					font-size: 22rpx;
					color: #FFFFFF;
					margin-left: 20rpx;
					background-color: #48BC7C;
					border-radius: 4rpx;
				}

				.color {
					background-color: #FC4F4F !important;
				}
			}

			.attachment {
				display: flex;
				flex-wrap: wrap;

				image {
					width: 124rpx;
					height: 124rpx;
					margin-right: 20rpx;
					margin: 10rpx 20rpx 10rpx 0;

					&:nth-child(3n) {
						margin-right: 0 !important;
					}
				}
			}


			.image {
				display: flex;
				flex-wrap: wrap;
				margin-bottom: 20rpx;
				
				.box-image {
					position: relative;
				}

				.del {
					width: 38rpx;
					height: 38rpx;
					position: absolute;
					top: -16rpx;
					right: 4rpx;
				}

				.images {
					margin-right: 20rpx;
					width: 140rpx;
					height: 140rpx;

					&:nth-child(3n) {
						margin-right: 0;
					}
				}

				.upload {

					display: flex;
					justify-content: center;
					flex-direction: column;
					align-items: center;
					font-size: 20rpx;
					color: #A0A7B8;
					width: 140rpx;
					height: 140rpx;
					border: 2rpx dashed #d0d6e5;
					border-radius: 8rpx;
					line-height: normal;

					image {
						width: 28rpx;
						height: 28rpx;
						margin-right: 0;
						margin-bottom: 10rpx;
					}
				}
			}

			.textarea {
				box-sizing: border-box;
				min-height: 120rpx;
				padding: 20rpx 30rpx;
				font-size: 26rpx;
				border: 2rpx solid #EBEEF5;
				margin-bottom: 20rpx;
				border-radius: 8rpx;
			}

			.floot {
				margin-top: 60rpx;
				display: flex;
				justify-content: flex-end;

				.btn {
					display: flex;
					justify-content: center;
					align-items: center;
					width: 120rpx;
					height: 60rpx;
					font-size: 32rpx;
					border-radius: 8rpx;
				}

				.back {
					border: 2rpx solid #FC4F4F;
					color: #FC4F4F;
					margin: 0 40rpx;
				}

				.pass {
					background: linear-gradient(266deg, #2e73fc 3%, #1ea9fb 95%);
					color: #FFFFFF;
				}


			}
		}
	}
</style>
